@height-split: 800px;

.to {
  height: 100%;
  width: 100% ;
  background: rgba(173, 216, 230);
  &-title {
    display: flex;
    justify-content: flex-end;
    height: 280px;
    align-items: center;
    padding-right: 20px;
    .self {
      height: 100px;
      width: 100px;
    }
  }
  .to-do {
    height: @height-split;
    width: 100%;
    position: relative;
    &__top {
      position: absolute;
      top: 0;
      left: 35%;
      transition: all 1s ease;
      &.clicked {
        top: 37.5%;
        animation: rotate 1.2s linear infinite 1s;
      }
    }
    &__bottom {
      position: absolute;
      bottom: 0;
      left: 35%;
      transition: all 1s ease;
      &.clicked {
        bottom: 37.5%;
        animation: rotate 1.2s linear infinite 1s;
      }
    }
  }
}

/* 定义旋转动画 */
@keyframes rotate {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}